<%--
  User: hedingwei
  Date: 2021/2/18
  Time: 15:07
--%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>网站首页</title>
    <link href="${R}/favicon.ico" rel="icon"/>
    <link href="${R}/less/test.less"  rel="stylesheet" type="text/css"/>
</head>
<body >
<div id="app">
    <span>这是一个干净的页面</span>
    <br/>
    <span>特点：</span>
    <ul>
        <li>使用了vue, 没有是用element-ui。</li>
        <li><p>直接用SimpleApplication初始化（和admin里面的一样也有全局Application对象，它的方法都有，准确的说，AdminApplication是继承至这个SimpleApplication）</p></li>
        <li>可以去选择使用element-ui的样式是，也可以选择bootstrap，也可以从头写css</li>
        <li>样式也可以使用less</li>
        <li>
            页面可以识别登录状态:
            <shiro:authenticated>
                <p>这是登录了才能看到的</p>
                <p>
                    <shiro:principal/>
                    <br/>
                    <a href="/logout">登出</a>
                </p>
            </shiro:authenticated>
            <shiro:notAuthenticated>
                <p>这是没有登录的</p>
               <div>
                   用户名：<input type="text"  v-model="form.username"/>    （hedingwei）
                   <br/>
                   密码：<input type="password" v-model="form.password"/> （123456）
                   <br/>
                   <a href="#" @click="login">登录</a>
               </div>

            </shiro:notAuthenticated>
        </li>
    </ul>
</div>
<script src="${R}/js/jquery-3.5.1.min.js"  type="text/javascript"></script>
<script src="${R}/js/purl.js"  type="text/javascript"></script>
<script src="${R}/js/director.js" type="text/javascript"></script>
<script src="${R}/js/vue.js" type="text/javascript"></script>
<script src="${R}/js/vue-cookie.js" type="text/javascript"></script>

<jsp:include page="core/SimpleApplication.jsp"/>

<script>

    $(function(){
        ApplicationInit('#app',{
            data: function(){
                return {
                    form:{
                        username:"hedingwei",
                        password:"123456"
                    }
                }
            },
            methods: {
                login:function(){
                    Application.ajax_post("${R}/login",{
                        username: this.form.username,
                        password: this.form.password
                    }).then((data)=>{
                        if (data.code == 20000) {
                            location.href = '${R}/';
                        }
                    }).catch(()=>{
                        Application.messageError("用户名密码错误")
                    })

                }
            },
            mounted:function(){
                console.log('网站首页初始化完毕')
            },
            created:function(){

            }
        });
    })

</script>
</body>
</html>
